﻿@model int[]

<link href="/Administration/Content/zTree/css/demo.css" rel="stylesheet" />
<link href="/Administration/Content/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="/Administration/Content/zTree/js/jquery.ztree.all.js"></script>
@Html.HiddenFor(model => model)
<div class="input-group">
    <input id="select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" type="text" readonly value="" class="form-control text-box single-line" />
    <div class="input-group-btn">
        <button type="button" name="menuBtns@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" class="btn btn-info" onclick="showMenus@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))();">
            选择
        </button>
    </div>
</div>
<div id="menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" class="menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" style="display:none; position: absolute;z-index: 999;">
    <ul id="treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" class="ztree" style="margin-top:0;"></ul>
</div>
<script type="text/javascript">
        var settings@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)) = {
            check: {
                enable: true,   //true / false 分别表示 显示 / 不显示 复选框或单选框
                autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
                chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
                chkboxType: { "Y": "p", "N": "s" }   //勾选 checkbox 对于父子节点的关联关系
            },
            view: {
                selectedMulti: true, //设置是否能够同时选中多个节点
                showIcon: true, //设置是否显示节点图标
                showLine: true, //设置是否显示节点与节点之间的连线
                showTitle: false, //设置是否显示节点的title提示信息
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: null
                }
            },
            callback: {
                //beforeClick: beforeClicks,
                onClick: onClick@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))
            }
        };
        var zNodess@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)) =[
        @foreach (var item in (List<SelectMenuModel>)ViewData["SelectList"])
    {
        <text>
            { id: @item.id, pId: @item.pId, name: "@Html.Raw(item.name)", checked:true },
            </text>
    }
        ];

        @*function beforeClicks(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }*@

        function onClick@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))"),
                nodes = zTree.getSelectedNodes(true),
            v = "",vArrary=[];
            for (var i=0, l=nodes.length; i<l; i++) {
                v += nodes[i].name + ",";
                vArrary.push(nodes[i].id);
            }
            if (v.length > 0 ) v = v.substring(0, v.length-1);
            var cityObj = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))");
            cityObj.attr("value", v);
            $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val(vArrary);
        }

        function showMenus@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))() {
            var cityObj = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))");
            var cityOffset = $("#select_menu@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").offsetParent();
            $("#menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
            $("#treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").css({width:cityObj.outerWidth()+"px"});
            $("body").bind("mousedown", onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));
        }
        function hideMenus@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))() {
            $("#menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));
        }
        function onBodyDown@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))(event) {
            if (!(event.target.id == "menuBtns@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" || event.target.id == "menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))" || $(event.target).parents("#menuContents@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))").length>0)) {
                hideMenus@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))();
            }
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty))"), settings@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)), zNodess@(ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)));

        });
</script>
